<template>
  <div id="app">
    <div id="nav">
      <h1>我是网站的标题</h1>
      <!-- router-link默认渲染成a标签 -->
      <!-- tag可以修改router-link渲染的标签 -->
      <!-- replace不会留下history记录,在设置了replace属性后，后退键不能返回上一个界面 -->
      <!-- active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称. -->
      <!-- <router-link to="/home" tag="button" replace>Home</router-link>
      <router-link to="/about" tag="button" replace>About</router-link> -->

      <!-- 通过代码来实现路由跳转 -->
      <!-- <button @click="linktohome">首页</button>
      <button @click="linktoabout">关于</button> -->

      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
      <!-- <router-link :to="'/user/' + UserId">User</router-link>
      <router-link :to="{ path: '/profile', query: { name: 'LMX', age: 18 } }"
        >Profile</router-link
      > -->
      <!-- 不用router-link实现 -->
      <button @click="UserClick">User</button>
      <button @click="ProfileClick">Profile</button>
    </div>
    <!-- router-view渲染的位置，这个表示渲染在两个超链接的下面 -->
    <!-- <router-view /> -->

    <!-- keep-alive保持组件的活跃状态,避免被销毁.把加载过的组件缓存下来,减少加载占据的内存  -->
    <!-- inclued:只有匹配的组件被缓存 -->
    <!-- exclude:只有匹配的组件不会被缓存 -->
    <keep-alive exclude="user">
      <router-view></router-view>
    </keep-alive>
    <h2>我是APP中的底部信息</h2>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      UserId: "zhangsan",
    };
  },
  methods: {
    linktohome() {
      this.$router.push("/home");
    },
    linktoabout() {
      this.$router.push("/about");
    },
    UserClick() {
      this.$router.replace("/user/" + this.UserId);
    },
    ProfileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "LMX",
          age: 19,
        },
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.active {
  color: red;
}
</style>
